import React, { Component } from 'react';
import { View, Dimensions, StyleSheet, ListView, TouchableOpacity, Platform, } from 'react-native';
import { Container, Content, Text, Icon, ListItem, Body, Spinner } from 'native-base';
import { NavigationActions } from 'react-navigation';
import { connect } from 'react-redux';
import course from '../../net/course';
import MoreCourseList from '../../db/coursedb/morecourse_list_table.js';
const { width, height } = Dimensions.get('window');
const marginTop = Platform.OS === 'ios' ? 20 : 0;

class department_course extends Component {
    static navigationOptions = ({ navigation }) => ({
        title: navigation.state.params.title,
    });
    constructor(props) {
        super(props);
        this.state = { termInfo: null };
    }

    async componentWillMount() {
        const { department_info } = this.props;
        let courseList = new MoreCourseList();
        try {
            await courseList.creatMoreCourseListTable();
            let info = await courseList.queryMoreCourseList(department_info.departmentid);
            if (info != null && info.length > 0) {
                console.log('courseList1111111111');
                let outArray = JSON.parse(info.item(0).value);
                console.log(outArray);
                this.setState({ termInfo: outArray });

            } else {
                console.log('courseList2222222222');
                let cs = new course();
                let outArray =await cs.get_list(department_info.departmentid);
                this.setState({ termInfo: outArray });
                courseList.insertMoreCourseList(department_info.departmentid, JSON.stringify(outArray));
            }
        } catch (e) {
            console.log("error", e);
        } /* finally {
            courseList.closeMoreCourseList();
            
        } */

    }

    render_content(l) {
        const { setDepartmentCourseInfo,navigation } = this.props;  
        return l.map((v, i) => {
            return (
                <View key={i}>
                    <ListItem button style={StyleSheet.flatten(styles.mainList)}
                        onPress={() => {
                            setDepartmentCourseInfo({
                                type: 'DepartmentCourseIdSuccess',
                                payload: v.id
                            });
                            this.props.navigation.dispatch('CourseTerm');
                            this.props.navigation.navigate('CourseTerm',{ title: v.name });
                        }}>
                        <Body>
                            <Text style={StyleSheet.flatten(styles.textStyle)}>{v.name}</Text>
                        </Body>
                        <Icon name="arrow-forward" style={{ opacity: 0.6,fontSize:23 }} />
                    </ListItem>
                </View>
            );
        })
    }

    renderLoadingView() {
        return (
            <Container>
                <Content>
                    <Spinner color='green' />
                </Content>
            </Container>
        );
    }
    render() {
        if (!this.state.termInfo) {
            return this.renderLoadingView();
        }
        return (
            <Content style={{ marginTop: 10 }}>
                {this.render_content(this.state.termInfo)}
            </Content>
        );
    }
}

const styles = StyleSheet.create({
    mainList: {
        height: 40,
        marginRight: 0,
        marginLeft: 0,
        // marginTop: 1,
        // paddingBottom: 10,
        paddingLeft: 20,
        paddingRight: 20,
        backgroundColor: 'white',
        borderBottomWidth: 0.2,
        borderBottomColor: "#cac0c0",
    },
    // mainList: {
    //     height: 40,
    //     marginRight: 0,
    //     marginLeft: 0,
    //     paddingBottom: 10,
    //     paddingLeft: 10,
    //     paddingRight: 20,
    //     backgroundColor: 'white',
    //     borderBottomWidth: 0.2,
    //     borderBottomColor: "#cac0c0",
    // },
    textStyle: {
        fontSize: 16,
        color: '#353535',
    },
});

function mapStateToProps(state) {
    return { department_info: state.course.department_info }
}

function mapDispatchToProps(dispatch) {
    return {
        setDepartmentCourseInfo: (state) => dispatch(state)
    }
}

const PageDepartmentCourse = connect(
    mapStateToProps,
    mapDispatchToProps
)(department_course)
export default PageDepartmentCourse;